<template>
	<view>
		<!-- <view class="box">
			<image :src="list[imgnum-1].imgurl" mode="widthFix" class="box_img"></image>
			<view class="box_num">{{imgnum}}/{{list.length}}</view>
		</view> -->
		
		<!-- 轮播图 -->
		
		<swiper class="swiper" :current="current" @change="changeImg">
			<block v-for="(item,index) in list" :key="index">
				<swiper-item>
					<view class="swiper_box">
						<view class="swiper_num">{{current+1}}/{{list.length}}</view>
						<image class="swiper_img" lazy-load mode="widthFix" :src="item.imgurl"></image>
					</view>
				</swiper-item>
			</block>
		</swiper>
		
		
		<view class="footer">
			<view class="footer_l" @click="last">上一张</view>
			<view class="footer_c" @click="download">下载到相册</view>
			<view class="footer_r" @click="next">下一张</view>
		</view>
		
		<view class="share">
			<button open-type="share" class="share_button"><image src="/static/share.png" class="share_img"></image></button>
			
		</view>
		
		<!-- 左右滑动 -->
		<!-- <swiper class="swiper" circular @change="changeImg">
			<block v-for="(item,index) in list" :current="current" :key="index">
				<swiper-item>
					<view class="swiper_item"></view>
				</swiper-item>
			</block>
		</swiper> -->
		
	</view>
</template>

<script>
	import { requestData } from 'util/request';
	export default {
		data() {
			return {
				list: [],
				imgurl: '',
				imgnum: '',
				current: 0,
				ctypeid: '',
				zoneid: '',
				shareTrue: false,
			};
		},
		
		// 下拉刷新
		// onPullDownRefresh() {
		// 	let that = this
			
		// 	that.list = []
		// 	that.request()
		// 	setTimeout(function () {
		// 		uni.stopPullDownRefresh();
		// 	}, 1000);
		// },
		
		// 分享
		onShareAppMessage(res) {
			return {
			  title: '御芙兰三通大师',
			  path: '/pages/index/imageDetail?shareTrue=true&imgurl='+ this.imgurl + '&ctypeid='+this.ctypeid + '&zoneid=' + this.zoneid
			}
		},
		
		onShareTimeline() {
			return {
			  title: '御芙兰三通大师',
			  query: 'shareTrue=true&imgurl='+ this.imgurl + '&ctypeid='+this.ctypeid + '&zoneid=' + this.zoneid
			  // path: '/pages/index/imageDetail?imgurl='+ this.imgurl + '&ctypeid='+this.ctypeid + '&zoneid=' + this.zoneid
			}
		},
		
		onLoad(options) {
			let that = this
			
			console.log(options,'options------------')
			if(options.ctypeid){
				that.ctypeid = options.ctypeid
			}
			
			if(options.zoneid){
				that.zoneid = options.zoneid
			}
			
			that.imgurl = options.imgurl
			// that.request()
			if(options.shareTrue){
				console.log(options.shareTrue)
				wx.login().then((d) => {
					wx.request({
						url: getApp().globalData.url + '/sys/reg',
						method: 'POST',
						data: {
							code: d.code
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {
							if (res.data.data.flag == 1) {
								that.request()
							}else{
								uni.reLaunch({
									url: '/pages/index/login'
								})
							}
						},
				
					})
				})
			}else{
				that.request()
			}
		},
		
		methods: {
			// 左右滑动
			changeImg(e){
				let that = this
				
				console.log(e)
				that.current = e.detail.current
				that.imgurl = that.list[that.current].imgurl
			},
			
			// 上一张
			last(){
				let that = this
				
				if(that.imgnum==1){
					return false
				}
				that.imgnum = that.imgnum - 1
				that.current = that.current - 1
				that.imgurl = that.list[that.imgnum-1].imgurl
			},
			
			// 下载
			download(){
				let that = this
				
				uni.getImageInfo({
					src: that.imgurl,
					success: function (image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function () {
								uni.showToast({
									title: '下载成功！'
								})
							},
							fail(err) {
								if(err.errMsg == 'saveImageToPhotosAlbum:fail auth deny'){
									uni.showModal({
										title: '提示',
										content: '需要您授权保存相册',
										showCancel: false,
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(settingdata) {
														if (settingdata.authSetting['scope.writePhotosAlbum']) {
															uni.showModal({
																title: '提示',
																content: '获取权限成功,再次保存图片即可成功',
																showCancel: false,
															})
														} else {
															uni.showModal({
																title: '提示',
																content: '获取权限失败，无法保存到相册',
																showCancel: false
															})
														}
													}
												})
											}
										}
									})
								}
							}
						});
					}
				});
			},
			
			// 下一页
			next(){
				let that = this
				if(that.imgnum==that.list.length){
					return false
				}
				that.imgnum = that.imgnum + 1
				that.current = that.current + 1
				that.imgurl = that.list[that.imgnum-1].imgurl
			},
			
			// 接口
			request(){
				let that = this
				
				let prama = {
					ctypeid: that.ctypeid,
					zoneid: that.zoneid
				}
				requestData('/fp/pdlist',prama).then(res=>{
					that.list = res.data
					for(var i = 0;i<that.list.length;i++){
						if(that.imgurl == that.list[i].imgurl){
							that.imgnum = i + 1
							that.current = i
						}
					}
				})
				
				// uni.request({
				// 	url: getApp().globalData.url + '/fp/pdlist',
				// 	method: 'POST',
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded',
				// 		token: uni.getStorageSync('token')
				// 	},
				// 	data: {
				// 		ctypeid: that.ctypeid,
				// 		zoneid: that.zoneid
				// 	},
				// 	success(res) {
				// 		that.list = res.data.data
				// 		for(var i = 0;i<that.list.length;i++){
				// 			if(that.imgurl == that.list[i].imgurl){
				// 				that.imgnum = i + 1
				// 				that.current = i
				// 			}
				// 		}
				// 	}
				// })
			},
		}
		
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: #03AEA5;
	}
	// .box{
	// 	position: relative;
	// 	margin: 30rpx;
	// 	width: 690rpx;
	// 	overflow: hidden;
		
	// 	&_img{
	// 		width: 690rpx;
	// 	}
	// 	&_num{
	// 		position: absolute;
	// 		top: 30rpx;
	// 		left: 30rpx;
	// 		width: 135rpx;
	// 		height: 38rpx;
	// 		background: rgba(0, 0, 0, 0.64);
	// 		border-radius: 19rpx;
	// 		text-align: center;
	// 		font-family: PingFang SC;
	// 		font-weight: 500;
	// 		font-size: 28rpx;
	// 		color: #FFFFFF;
	// 		line-height: 38rpx;
	// 	}
	// }
	
	.swiper{
		position: relative;
		width: 750rpx;
		height: 100vh;
		overflow: hidden;
		
		&_box{
			position: absolute;
			top: 25%;
			left: 50%;
			transform: translate(-50%,-25%);
			// width: 750rpx;
			// height: 100vh;
			overflow: hidden;
			
			.swiper_img{
				width: 750rpx;
			}
			.swiper_num{
				position: fixed;
				top: 30rpx;
				left: 60rpx;
				width: 135rpx;
				height: 38rpx;
				background: rgba(0, 0, 0, 0.64);
				border-radius: 19rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				z-index: 2;
			}
		}
		
	}
	
	.footer{
		position: fixed;
		bottom: 80rpx;
		left: 77rpx;
		width: 596rpx;
		height: 95rpx;
		overflow: hidden;
		
		&_l{
			float: left;
			width: 156rpx;
			height: 95rpx;
			background: #BF2538;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 95rpx;
			border-radius: 80rpx 0rpx 0rpx 80rpx;
		}
		&_c{
			float: left;
			margin: 0rpx 5rpx;
			width: 275rpx;
			height: 95rpx;
			background: #BF2538;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			letter-spacing: 6px;
			color: #FFFFFF;
			line-height: 95rpx;
		}
		&_r{
			float: left;
			width: 156rpx;
			height: 95rpx;
			background: #BF2538;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 95rpx;
			border-radius: 0rpx 40rpx 40rpx 0rpx;
		}
	}
	
	// 左右滑动
	// .swiper{
	// 	position: fixed;
	// 	top: 0rpx;
	// 	left: 0rpx;
	// 	width: 750rpx;
	// 	height: 1200rpx;
	// 	opacity: 0.8;
	// 	z-index: 2;
		
	// 	&_item{
	// 		width: 750rpx;
	// 		height: 1200rpx;
	// 	}
	// }
	
	// 分享
	.share{
		position: fixed;
		top: 600rpx;
		right: 30rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		z-index: 3;
		
		&_button{
			width: 120rpx;
			height: 120rpx;
			z-index: 4;
		}
		&_img{
			position: absolute;
			top: 0;
			left: 0;
			width: 120rpx;
			height: 120rpx;
		}
	}
</style>
